import React, { useState, useEffect } from 'react';
import axios from "axios";
import config from "../../Config";
import { useNavigate } from 'react-router-dom';
import {GetCasterDepartment} from "../../utils/hooks"

import {
  Form,
  Input,
  Select,
  Button,
  message,
  Cascader
} from 'antd';
const { Option } = Select;
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 8,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 16,
    },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};
const labelText = (text) => {
  return (<div style={{ width: "50px", textAlign: "left" }}>
    {text}
  </div>)
}
const ArrayToString=(arr)=>{
  let str=" ";
  for(let i=0;i<arr.length;i++)
  str+=(" "+arr[i]);
  return str;
}
const inputType = { width: "250px", height: "30px", marginLeft: "10px", marginBottom: "10px" }
export default () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  const {departmentList, SetdepartmentList} = GetCasterDepartment();
  const onFinish = (values) => {
    delete values.confirm;
    values.departmentId=ArrayToString(values.departmentId);
    console.log(values);
    axios.post(config.baseURL + '/user/register', values)
      .then(function (response) {
        let res = response.data;
        if (res.code === 1) {
          message.success("注册成功", 1);
          window.location.reload();
        }
        else if (res.code >= 10000) {
          message.error(res.message, 1);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  };

  return (
    <Form
      {...formItemLayout}
      className="sign-up-form"
      form={form}
      name="register"
      onFinish={onFinish}
    >
      <Form.Item
        name="username"
        label={labelText("用户名")}
        rules={[
          {
            pattern: /^[a-z0-9A-Z_-]{3,16}$/,
            message: '用户名由3-16位拼音字母下划线横杠组成',
          },
          {
            required: true,
            message: '请输入您的用户名',
          },
        ]}
      >
        <Input style={inputType} />
      </Form.Item>

      <Form.Item
        name="password"
        label={labelText("密码")}
        rules={[
          {
            required: true,
            message: '请输入您的密码!',
          },
          {
            pattern: /^[a-z0-9A-Z_-]{6,16}$/,
            message: '密码由6-16位拼音字母下划线横杠组成',
          },
        ]}
        hasFeedback
      >
        <Input.Password style={inputType} />
      </Form.Item>

      <Form.Item
        name="confirm"
        label={labelText("确认密码")}
        dependencies={['password']}
        hasFeedback
        rules={[
          {
            required: true,
            message: '请确认密码',
          },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }

              return Promise.reject(new Error('您两次输入的密码不同!'));
            },
          }),
        ]}
      >
        <Input.Password style={inputType} />
      </Form.Item>

      <Form.Item
        name="departmentId"
        label={labelText("部门")}
        rules={[
          {
            required: true,
            message: '请输入您的部门!',
          },
        ]}
      >
        <Cascader changeOnSelect style={inputType}  options={departmentList} placeholder="请选择" />
      </Form.Item>

      <Form.Item
        name="name"
        label={labelText("姓名")}
        rules={[
          {
            pattern: /^[\u4e00-\u9fa5]{2,6}$/,
            message: '请输入中文',
          },
          {
            required: true,
            message: '请输入您的姓名!',
          },
        ]}
      >
        <Input style={inputType} />
      </Form.Item>


      <Form.Item
        name="sex"
        label={labelText("性别")}
        rules={[
          {
            required: true,
            message: '请输入您的性别!',
          },
        ]}
      >
        <Select placeholder="" style={inputType}>
          <Option value="男">男</Option>
          <Option value="女">女</Option>
        </Select>
      </Form.Item>


      <Form.Item {...tailFormItemLayout} >
        <Button htmlType="submit" type="primary" shape="round" size="large" style={{ color: 'white', marginTop: "20px" }}>
          注册
        </Button>
      </Form.Item>
    </Form>
  );
};
